<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.apply_transfer.title" :background="background" :border-bottom="false" title-color="#000000"
			back-icon-color="#000">
		</u-navbar>
		<view class="all">
			<view class="info">
				<view class="title">
					{{i18n.apply_transfer.merchant_balance}}
				</view>
				<view class="cont2">
					<text>{{ transferBaseInfo.balance }}</text>
				</view>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.apply_transfer.withdrawable_cash_amount}}
				</view>
				<view class="cont">
					<text>{{ transferBaseInfo.transferBalance }}</text>
				</view>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.apply_transfer.guaranteed_amount}}
				</view>
				<view class="cont">
					<text>{{ transferBaseInfo.guaranteedAmount }}</text>
				</view>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.apply_transfer.transfer_type}}
				</view>
				<text class="cont">{{ transferBaseInfo.transferType == 'bank' ? i18n.transfer_record.Transfer_type_bank : i18n.transfer_record.Transfer_type_online }}</text>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.apply_transfer.account_name}}
				</view>
				<text class="cont">{{ transferBaseInfo.transferName }}</text>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.apply_transfer.bank_of_account}}
				</view>
				<text class="cont">{{ transferBaseInfo.transferBank }}</text>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.apply_transfer.bank_account_number}}
				</view>
				<text class="cont">{{ transferBaseInfo.transferBankCard }}</text>
			</view>
 
			<u-alert-tips type="warning" :description="description" class="warning"></u-alert-tips>
			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType" class="content">
				<u-form-item :label-position="labelPosition" :label="i18n.apply_transfer.application_amount" prop="money" label-width="auto" class="bot">
					<u-input :border="border" :placeholder="i18n.apply_transfer.enter_the_amount_requested" v-model="form.money" type="number" :input-align="align"></u-input>
					<u-button slot="right" type="success" size="mini" @click="allMoney">{{i18n.commission_details.all_money}}</u-button>
				</u-form-item>
				<u-form-item :label-position="labelPosition" :label="i18n.apply_transfer.remark" prop="remark" label-width="auto" class="bot">
					<u-input :border="border" :placeholder="i18n.apply_transfer.enter_remarks" v-model="form.remark" type="text" :input-align="align"></u-input>
				</u-form-item>
			</u-form>
			
		</view>
		<view class="button"  @click="btnClick()">
			{{i18n.apply_transfer.submit}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				transferBaseInfo: {}, 
				border: false,
				labelPosition: 'left',
				form: {
					money: '',
					remark:''
				},
				rules: {},
				errorType: ['message'],
				align: "right",
				description: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang();
			this.getTransferInfoData();
		},
		methods: {
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			allMoney(){
				var maxMoney = parseFloat(this.transferBaseInfo.transferMaxAmount);
				var balance = parseFloat(this.transferBaseInfo.transferBalance);
				if(balance<=maxMoney){
					this.form.money = balance;
				}else{
					this.form.money = maxMoney;
				}
			},
			getTransferInfoData() {
				global.$http.request({
					url: '/api/admin/merchant/finance/transfer/base/info',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET'
				}).then(res => {
					if (res.data.code == 200) {
						this.transferBaseInfo = res.data.data;
						this.description = this.i18n.apply_transfer.tips.replace("{0}",this.transferBaseInfo.transferMinAmount).replace("{1}",this.transferBaseInfo.transferMaxAmount);
						this.setRules();
					}
				})
			},
			btnClick(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.submit();
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			submit() {
				global.$http.request({
					url: '/api/admin/merchant/finance/transfer/apply',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'POST',
					data: {
						amount:this.form.money,
						mark:this.form.remark,
						transferType: 'bank'
					}
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
						  	title: this.i18n.apply_transfer.submit_success,
						  	icon: 'none',
						  	duration: 3000
						})
						this.getTransferInfoData();
						this.form.money = '';
						this.form.remark = '';
					}else{
						uni.showToast({
						  	title: this.i18n.apply_transfer.submit_fail,
						  	icon: 'none',
						  	duration: 3000
						})
					}
				})
			},
			setRules(){
				var that = this;
				this.rules = {
					money: [
						{
							required: true,
							message: this.i18n.commission_details.input_money,
							trigger: 'blur' ,
						},
						{
							validator: (rule, value, callback) => {
								var inputMoney = parseFloat(value);
								var minMoney = parseFloat(that.transferBaseInfo.transferMinAmount);
								var maxMoney = parseFloat(that.transferBaseInfo.transferMaxAmount);
								if(inputMoney>=minMoney && inputMoney <= maxMoney){
									return true
								}else{
									return 	false
								}
							},
							message: this.description,
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								var inputMoney = parseFloat(value);
								var maxMoney = parseFloat(that.transferBaseInfo.transferBalance);
								if(inputMoney <= maxMoney){
									return true
								}else{
									return 	false
								}
							},
							message: this.i18n.apply_transfer.max_rule.replace("{0}",this.transferBaseInfo.transferBalance),
							trigger: ['blur'],
						},
					],
				};
				this.$refs.uForm.setRules(this.rules);
			}
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;

		.main {

			.shop_info {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #304156;
				padding-right: 19rpx;
			}

			.all {
				margin-top: 10rpx;

				.info {
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 31rpx 22rpx;
					margin-bottom: 2rpx;

					.title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #808080;
					}

					.info_img {
						width: 110rpx;
						height: 110rpx;

						image {
							width: 110rpx;
							height: 110rpx;
						}
					}

					.cont {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;
					}

					.cont2 {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FF0000;
					}
				}
				.warning{
					margin: 10px 0;
				}
				.content {
					margin: 10rpx 0;

					.bot {
						background-color: #fff;
						margin-bottom: 2rpx;
						padding: 31rpx 22rpx;
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;

						text {
							color: #000000;
						}

						input {
							text-align: right;
						}
					}
				}
			}
			.button{
				margin-top: 190rpx;
				width: 750rpx;
				height: 98rpx;
				background: #304156;
				text-align: center;
				line-height: 98rpx;
				
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
